<template>
    <div>
        <p>{{ msg }}</p>

        <!-- 在这里点击执行return出来的方法 -->
        <button @click="changeMsg">修改MSG</button>
        <!-- 在这里点击执行return出来的方法 -->
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'

export default defineComponent({
    setup() {

        const userInfo = reactive({
            name: 'petter',
            age: 13
        })

        console.log("userInfo=before",userInfo);
        

        setTimeout(() => {
            userInfo.name = 'tom'
        }, 2000)



        watch(userInfo, () => {
            console.log(`监听整个 userInfo`, userInfo.name);

        })

        watch(
            ()=> userInfo.name,
            (nVal,oVal)=>{
                console.log(`只监听name的变化`, userInfo.name);
                console.log(`打印变化前后的值：`,{ oVal, nVal});
                
                
            }
        )





        const msg = ref<string>('hello world!');

        function changeMsg() {
            msg.value = "hi world!"
        }


        const init = () => {
            console.log("init");

        }

        onMounted(() => {
            init()
        })

        return {
            msg,
            changeMsg
        }
    }
})
</script>

<style scoped>

</style>